<template>
  <div class="body" v-loading="loading"><div class="header">
    <div class="title"><span>大连晓芹食品有限公司采购订单</span></div>
    <el-col :span="8">
      <vue-qr ref="qrCode" :text="header.orderNo" style="margin: 0 20px 10px 0" width="220" height="220"></vue-qr>
      <div style="margin: 0 10px 10px 0">No.{{ header.orderNo }}</div>
    </el-col>
  </div>
    <div class="neck">
      <el-row>
        <el-col :span="12">
          <span>合同编号：</span>{{ header.billNo}}
        </el-col>
        <el-col :span="12">
          <span>单据类型：</span>{{ orderTypeMap[header.orderType] || header.orderType }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>采购单据编号：</span>{{ header.orderNo }}
        </el-col>
        <el-col :span="12">
          <span>采购日期：</span>{{ header.purchaseDate}}
        </el-col>
      </el-row>
    </div>
    <div class="body1">
      <table class="v-table" cellpadding="0" cellspacing="0">
        <tr>
          <th class="center">序号</th>
          <th>物料编码</th>
          <th>物料名称(规格)</th>
          <th >批次号</th>
          <th>采购单位</th>
          <th>采购数量</th>
          <th>交货日期</th>
          <th>价税合计</th>
        </tr>
        <tr v-for="(d, i) in dataList">
          <td class="center">{{ i + 1 }}</td>
          <td>{{ d.materialNo }}</td>
          <td>{{ d.materialName }}{{d.materialSpec}}</td>
          <td>{{ d.batchNo }}</td>
          <td>{{ d.purchaseUnitName }}</td>
          <td>{{ d.qty }}</td>
          <td>{{ d.deliveryDate }}</td>
          <td>{{ d.taxAmount }}</td>

        </tr>
      </table>
    </div>
    <div class="foot">
      <el-row>
        <el-col :span="6">
          <span>供应商：</span>{{ header.supplierName }}
        </el-col>
        <el-col :span="6">
          <span>结算方：</span>{{ header.settle }}
        </el-col>
        <el-col :span="6">
          <span>收款方：</span>{{ header.charge }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>采购部门：</span>{{ header.purchaseDeptName }}
        </el-col>
        <el-col :span="6">
          <span>采购员：</span>{{ header.purchaserName }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>备注：</span>{{ header.remark }}
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getBoxNo } from '../../utils'
import BatchAddRowDialog from "../components/batchAddRowDialog.vue";
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import tr from "element-plus/packages/locale/lang/tr";
export default {
  components: {BatchAddRowDialog, vueQr},
  data() {
    return {
      loading: false,
      header: {},
      dataList: [],
      orderTypeMap:{}
    }
  },
  created() {
     this.getDictionary()
  },
  async mounted() {
    let orderNo = this.$route.query.orderNo
    if (orderNo) {
      return this.getBill(orderNo)
    }
  },
  methods: {
    async getDictionary(){
      try {
        let res = await this.$api.getChildDictionaryListByKeys({ keys:['orderType']})
        console.log(res)
        if (!res.res) return
        let list = res.orderType || []
        let _orderTypeMap = {}
        for(let i = 0; i < list.length; i++) {
          _orderTypeMap[ list[i].key ] = list[i].name
        }
        this.orderTypeMap  = _orderTypeMap
      } finally {

      }
    },
    async getBill(orderNo) {
      this.loading = true
      try {
        let res = await this.callApi('get_pur_order', {
          orderNo: orderNo
        })
        if (res.res) {
          this.header = res.header || {}
          this.dataList = res.data || []
        }
      } finally {
        this.loading = false
      }
    },
  }
}
</script>

<style lang="scss" scoped>

.body {
  width: 100%;
  .header {
    padding: 0 30px 30px;
    display: flex;
    justify-content: space-between;
    .title {
      text-align: center;
      font-size: 30px;
      width: 100%;
      padding-left: 150px;
      padding-top: 50px;
      span {
        border-bottom:6px double black;
      }
    }
  }

  .neck {
    padding: 0 25px;
    font-size: 35px;
  }

  .body1 {
    padding: 10px 20px 20px 20px;
    font-family: 黑体;
    .v-table {
      width: 100%;
      border-collapse: collapse;
      tr {
        font-size: 35px;
        td {
          border: 2px solid var(--el-text-color-primary) !important;
          padding: 5px;
          &.center {
            text-align: center;
          }
          &.right {
            text-align: right;
          }
        }
        th {
          border: 2px solid var(--el-text-color-primary) !important;
          padding: 5px;
          &.center {
            text-align: center;
          }
          &.right {
            text-align: right;
          }
        }
      }
    }


    //:deep(.el-table__row) {
    //  font-size: 20px;
    //}
    //
    //:deep(.el-table) {
    //  &::before {
    //    height: 0 !important;
    //  }
    //  .el-table__header {
    //    font-size: 16px;
    //  }
    //
    //}

    :deep(.el-table--border){
      &::after {
        width: 0 !important;
      }
    }
  }


  .foot {
    padding: 0 25px;

    .el-row {
      margin-bottom: 10px;
    }
  }
}

</style>
